<!-- EditSeat -->
<template>
  <div class="EditSeat">
    <!-- menu -->
    <div class="menu">
      <div class="menu-item back" @click="back()">
        <i class="el-icon-arrow-left"></i>返回
      </div>
      <div class="menu-item room-name">{{ room.name }}</div>

      <!-- 保存 -->
      <div class="menu-item submit" @click="submit()">保存</div>
    </div>
    <div class="main">
      <div class="main-left">
        <div
            id="panzoom"
            :style="{
                        padding: paddingTop + 'px ' + paddingLeft + 'px',
                    }"
        >

          <!-- 椅子 -->
          <img
              class="yizi"
              @click="onClick($event, idx)"
              v-for="(seat, idx) in seats"
              :key="seat.seatId"
              :id="seat.seatId"
              :src="require('@/assets/img/library/yizi-normal.svg')"
              alt=""
              :style="{
                            width: itemWidth + 'px',
                            left: paddingLeft + seat.x * itemWidth + 'px',
                            top: paddingTop + seat.y * itemWidth + 'px',
                            '-webkit-transform':
                                'rotate(' + seat.direction * 90 + 'deg)',
                        }"
          />
          <!-- 桌子 -->
          <div
              class="zhuozi"
              @click="onClick($event, idex)"
              v-for="(table, idex) in tables"
              :key="table.tableId"
              :id="table.tableId"
              :style="{
                            width: itemWidth + 'px',
                            height: itemWidth * 2 + 'px',
                            left:
                                paddingLeft +
                                (table.x + table.direction * 2) * itemWidth +
                                'px',
                            top: paddingTop + table.y * itemWidth + 'px',
                            '-webkit-transform':
                                'rotate(' + table.direction * 90 + 'deg)',
                        }"
          ></div>
        </div>
      </div>
      <div class="main-right">
        <div class="oprate-add">
          <el-button size="mini" round @click="addYizi()"
          >添加椅子
          </el-button
          >
          <el-button size="mini" round @click="addZhuozi()"
          >添加桌子
          </el-button
          >
        </div>
        <div class="oprate-show" v-if="itemId != ''">
          <div class="item">
            <label
                style="
                                width: 50px;
                                display: inline-block;
                                text-align: center;
                            "
                :for="form.name"
            >名字:</label
            >
            <el-input
                style="width: calc(100% - 80px)"
                v-model="form.name"
            ></el-input>
          </div>
          <div class="item">
            <label
                style="
                                width: 50px;
                                display: inline-block;
                                text-align: center;
                            "
                :for="form.name"
            >方向:</label
            >
            <div
                style="
                                display: inline-block;
                                width: calc(100% - 80px);
                                text-align: left;
                            "
            >
              <el-button @click="changeDirection()" size="mini"
              >改变
              </el-button
              >
            </div>
          </div>
          <!-- 位置 -->
          <div class="item">
            <div
                style="
                                position: relative;
                                width: 58px;
                                height: 100px;
                                display: inline-block;
                                text-align: center;
                                float: left;
                            "
                :for="form.name"
            >
              <div style="float: right">位置:</div>
            </div>
            <div
                style="
                                display: inline-block;
                                width: calc(100% - 80px);
                                text-align: left;
                            "
            >
              <el-button
                  style="margin-left: 40px"
                  size="mini"
                  @click="changePosition('y', -1)"
              >
                上
              </el-button>

              <div style="height: 6px"></div>
              <el-button
                  size="mini"
                  @click="changePosition('x', -1)"
              >
                左
              </el-button>
              <el-button
                  style="margin-left: 30px"
                  size="mini"
                  @click="changePosition('x', 1)"
              >
                右
              </el-button>
              <div style="height: 6px"></div>
              <el-button
                  style="margin-left: 40px"
                  size="mini"
                  @click="changePosition('y', 1)"
              >
                下
              </el-button>
            </div>
          </div>
          <!-- 取消 -->
          <div style="height: 20px"></div>
          <div
              class="btu"
              style="background-color: #ee7777"
              @click="handleDelete()"
          >
            删除
          </div>
          <div class="btu" @click="cancel()">取消</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/utils/api";
import Panzoom from "@panzoom/panzoom";
import {Message} from "element-ui";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;
const itemMaxWidth = 60;

const randomID = () => Math.random().toString(36).substring(2);
export default {
  name: "EditSeat",
  components: {},
  props: ["roomId"],
  data() {
    //这里存放数据
    return {
      // 房间信息
      room: {},
      // panZoom的上白部分
      paddingTop: 0,
      // panzoom 左白部分
      paddingLeft: 0,
      // 图标宽度
      itemWidth: 100,
      maxX: 0,
      maxY: 0,
      // 最下右
      maxYr: 0,
      lastX: 0,
      lastY: 0,
      // 选中id
      itemType: 0,
      itemId: "",
      // 选中表单
      form: {},
      oldForm: {},
      seats: [],
      tables: [],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    init() {
      var elem = document.getElementById("panzoom");
      const panzoom = Panzoom(elem, {
        maxScale: 3.5,
        minScale: 1,
      });
      panzoom.pan(10, 10);
      panzoom.zoom(1, {animate: true});
      elem.parentElement.addEventListener("wheel", panzoom.zoomWithWheel);
      let f = {
        target: {id: "A1227"},
      };
    },
    // 添加椅子
    addYizi() {
      let that = this;
      if (this.form.x != null) {
        this.lastX = this.form.x + 1;
        this.lastY = this.form.y;
      } else {
        this.lastX = this.maxYr + 1;
        this.lastY = this.maxY;
      }

      this.form = {
        seatId: randomID() + randomID(),
        name: randomID(),
        direction: 0,
        repair: 0,
        height: 1,
        width: 1,
        red: false,
        roomId: this.room.roomId,
        x: this.form.x != null ? this.form.x + 1 : this.maxYr + 1,
        y: this.form.x != null ? this.form.y : this.maxY,
      };
      this.room.librarySeats.push(this.form);
      this.cacul(this.room);
      let e = {
        target: {
          id: this.form.seatId,
        },
      };
      setTimeout(() => {
        that.onClick(e, 1);
      }, 100);
    },
    // 添加桌子
    addZhuozi() {
      let that = this;

      this.form = {
        tableId: randomID() + randomID(),
        name: randomID(),
        direction: 0,
        height: 1,
        width: 1,
        roomId: this.room.roomId,
        x: this.form.x != null ? this.form.x + 1 : this.maxYr + 1,
        y: this.form.x != null ? this.form.y : this.maxY,
      };
      this.room.libraryTables.push(this.form);
      this.cacul(this.room);
      let e = {
        target: {
          id: this.form.tableId,
        },
      };
      setTimeout(() => {
        that.onClick(e, 1);
      }, 100);
    },
    // 改变位置
    changePosition(tag, tt) {
      // console.log("changePosition");
      if (this.form[tag] == 0 && tt == -1) return;
      this.form[tag] += tt;
      if (tag == "x") this.lastX = this.form[tag] + 1;
      else this.lastY = this.form[tag] + 1;
    },
    // 改变方向
    changeDirection() {
      // 椅子
      this.form.direction += 1;
      if (this.itemType == 0) {
        if (this.form.direction == 4) this.form.direction = 0;
      } else {
        if (this.form.direction == 2) this.form.direction = 0;
      }
    },
    // 点击桌椅
    onClick(e, idx) {
      console.log(e.target.id, idx);
      // 获取id 修改背景色
      if (this.itemId != "") {
        document.getElementById(this.itemId).style.background = "";
      }
      if (this.itemId != e.target.id) {
        document.getElementById(e.target.id).style.background =
            "rgba(243, 213, 222,0.7)";
        this.itemId = e.target.id;
      } else {
        this.itemId = "";
        this.form = {};
        return;
      }
      // 获取类型和详细信息
      this.seats.forEach((el) => {
        if (el.seatId == this.itemId) {
          this.itemType = 0;
          this.form = el;
          this.oldForm = {...el};
        }
      });
      this.tables.forEach((el) => {
        if (el.tableId == this.itemId) {
          this.itemType = 1;
          this.form = el;
          this.oldForm = {...el};
        }
      });
    },
    // 取消
    cancel() {
      console.log("cancle");
      Object.keys(this.oldForm).forEach((key) => {
        this.form[key] = this.oldForm[key];
      });
    },
    // 删除
    handleDelete() {
      let that = this;
      if (this.itemType == 0) {
        // 椅子
        this.$confirm("确定删除该座位吗？")
            .then((_) => {
              api.deleteSeat(this.form.seatId).then((data) => {
                this.form = {};
                this.itemId = ""
                Message.success("删除成功");
                that.queryRoom();
              });
            })
            .catch((_) => {
            });
      } else {
        //   桌子
        this.$confirm("确定删除该座位吗？")
            .then((_) => {
              api.deleteTable(this.form.tableId).then((data) => {
                this.form = {};
                this.itemId = ""
                Message.success("删除成功");
                that.queryRoom();
              });
            })
            .catch((_) => {
            });
      }
    },
    // 保存
    submit() {
      api.insertOrUpdateSeat(this.seats).then((data) => {
        Message.success("椅子保存成功");
      });
      api.insertOrUpdateTable(this.tables).then((data) => {
        let e = {
          target: {
            id:
                this.form.seatId == null
                    ? this.form.tableId
                    : this.form.seatId,
          },
        };
        this.onClick(e, -1);
        this.queryRoom();
        Message.success("座位保存成功");
      });
    },

    // 获取房间信息
    queryRoom() {
      api.queryRoom(this.roomId).then((data) => {
        console.log(data);
        this.room = data.data;
        // 获取后计算宽度
        this.cacul(data.data);
      });
    },
    // 计算宽高
    cacul(data) {
      this.seats = data.librarySeats;
      this.tables = data.libraryTables;
      let maxX = 0; // 最右
      let maxY = 0; // 最下
      let maxYr = 0; // 最下右
      this.seats.forEach((el) => {
        if (el.x > maxX) {
          maxX = el.x;
        }
        if (el.y > maxY) {
          maxY = el.y;
          maxYr = el.x;
        } else if (el.y == maxY && el.x > maxYr) {
          maxYr = el.x;
        }
      });
      // 桌子不一样 因为宽度不同
      this.tables.forEach((el) => {
        if (el.x + el.direction > maxX) {
          maxX = el.x + el.direction;
        }

        if (el.y + (1 - el.direction) > maxY) {
          maxY = el.y + (1 - el.direction);
          maxYr = el.x + el.direction;
        } else if (
            el.y + (1 - el.direction) == maxY &&
            el.x + el.direction > maxYr
        ) {
          maxYr = el.x + el.direction;
        }
      });
      // console.log(maxX, maxY, maxYr);
      this.maxX = maxX;
      this.maxY = maxY;
      this.maxYr = maxYr;
      // 取较长的一边作为最长
      let maxWidth = maxX > maxY ? maxX : maxY;
      // console.log(this.maxX);
      // 1. 第一次，先用最大 先保证宽
      // 得到width
      console.log(
          document.getElementById("panzoom").clientWidth,
          document.getElementById("panzoom").clientHeight
      );
      this.itemWidth =
          document.getElementById("panzoom").clientWidth / (maxWidth + 1);

      console.log("itemWidth: ", this.itemWidth);
      // 算paddingtop
      this.caculPadding(maxWidth, maxX, maxY);

      // 2  如果高度超出视野，重新算
      if (this.paddingTop < 0) {
        // 已Y为标准
        this.itemWidth =
            document.getElementById("panzoom").clientHeight /
            (maxY + 1);
        this.caculPadding(maxWidth, maxX, maxY);
      }

      // 3 最后保证大小
      if (this.itemWidth > itemMaxWidth) {
        console.log("超过了：", this.itemWidth);
        this.itemWidth = itemMaxWidth;
        // this.itemWidth=38.5;
        this.caculPadding(maxWidth, maxX, maxY);
      }
      console.log("最后保证大小" + this.itemWidth, this.paddingTop, this.paddingLeft);
    },
    // 计算padding
    caculPadding(maxWidth, maxX, maxY) {
      this.paddingLeft = 0;
      this.paddingTop = 0;
      this.paddingTop =
          (document.getElementById("panzoom").clientHeight -
              this.itemWidth * (maxY + 1)) /
          2;
      this.paddingLeft =
          (document.getElementById("panzoom").clientWidth -
              this.itemWidth * (maxX + 1)) /
          2;
      console.log(this.itemWidth, this.paddingTop, this.paddingLeft);
    },
    // 返回到房间管理
    back() {
      this.$emit("back");
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    setTimeout(() => {
      this.queryRoom();
    }, 300);

    this.init();
    // 全局监听键盘左右键事件
    var that = this;
    document.onkeypress = function (e) {
      if (e.code === "KeyA") {
        that.changePosition("x", -1);
      } else if (e.code === "KeyD") {
        that.changePosition("x", 1);
      } else if (e.code === "KeyW") {
        that.changePosition("y", -1);
      } else if (e.code === "KeyS") {
        that.changePosition("y", 1);
      }
      // console.log(e.code);
    };

    document.onkeyup = function (e) {
      if (e.code === "ArrowLeft") {
        that.changePosition("x", -1);
      } else if (e.code === "ArrowRight") {
        that.changePosition("x", 1);
      } else if (e.code === "ArrowUp") {
        that.changePosition("y", -1);
      } else if (e.code === "ArrowDown") {
        that.changePosition("y", 1);
      } else if (e.code === "Space") {
        that.changeDirection();
      }
      // console.log(e.code);
    };
  },
  beforeCreate() {
  }, //生命周期 - 创建之前
  beforeMount() {
  }, //生命周期 - 挂载之前
  beforeUpdate() {
  }, //生命周期 - 更新之前
  updated() {
  }, //生命周期 - 更新之后
  beforeDestroy() {
  }, //生命周期 - 销毁之前
  destroyed() {
  }, //生命周期 - 销毁完成
  activated() {
  }, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.EditSeat {
  width: 100%;
  height: 100%;
}

.menu {
  height: 40px;
  font-size: 18px;
  line-height: 30px;

  .menu-item {
    float: left;
  }

  .back {
    cursor: pointer;
    user-select: none;
  }

  .back:hover {
    font-weight: 800;
  }

  .room-name {
    margin-left: 30px;
    font-size: 16px;
    font-weight: 500;
    color: #666;
  }

  .submit {
    float: right;
    margin-right: 20px;
    width: 100px;
    font-size: 14px;
    line-height: 30px;
    padding: 0px 26px;
    background: #8ab2ed;
    border-radius: 15px;
    color: #fff;
    cursor: pointer;
    user-select: none;
  }
}

.main {
  height: calc(100% - 40px);
  width: 100%;
}

.main-left {
  float: left;
  width: calc(100% - 240px);
  height: 100%;
  background: #f2f2f2;
  padding: 5%;

  #panzoom {
    width: 100%;
    height: 100%;
    // background-color: #fff;
    .yizi {
      display: inline-block;
      position: absolute;
      left: 0;
      cursor: pointer;
    }

    .zhuozi {
      transform-origin: left top;
      display: inline-block;
      position: absolute;
      cursor: pointer;
      height: 200px;
      width: 100px;
      background: rgba(165, 218, 252, 0.9);
    }
  }
}

.main-right {
  float: right;
  height: 100%;
  width: 240px;
  background: #e6eef4;

  .oprate-add {
    padding: 20px;
    border-bottom: 1px solid #cacaca;
  }

  .oprate-show {
    margin-top: 20px;

    .item {
      margin-bottom: 10px;
    }
  }

  .btu {
    margin: auto;
    margin-top: 20px;
    width: 140px;
    font-size: 14px;
    line-height: 30px;
    padding: 0px 26px;
    background: #ccc;
    border-radius: 15px;
    color: #fff;
    cursor: pointer;
    user-select: none;
  }
}
</style>
